<template>
	<view>
		<view>
			<view style="font-size: 16px;font-weight: bold;padding: 17px 12px 17px 12px;">{{docterName}}</view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"
				itemStyle="font-size: 14px;font-weight: bold;" lineColor="#f56c6c" bg-color="#f4f4f4"></u-tabs>


			<view style="background-color: rgb(240, 240, 240);padding: 5px 10px 5px 10px;">
				<view
					style="padding: 22px 18px 22px 18px;display: flex;justify-content: center;flex-direction: column;background-color: white;border-radius: 20px;">
					<image :src="faceurl" style="border-radius: 10px;margin-bottom: 20px;"></image>
					<view v-bind:text="detail" style="font-size: 14px;font-weight: 500;">{{detail}}</view>
				</view>


				<view style="display: flex;justify-content: center;padding: 15px;">
					<u-button type="primary" size="medium" open-type="contact">线上咨询</u-button>
				</view>
			</view>

		</view>


		<u-calendar v-model="show" :mode="mode" :min-date="mindate" max-date="2024-12-30" :noInclude="noInclude"
			max-year="2024" min-year="2023" @change="chooseDate"></u-calendar>

		<u-modal v-model="modelShow" :content="modalContent"></u-modal>

		<u-popup v-model="showPop" mode="right" width="200px">
			<view style="text-align: center;font-weight: bold;padding-top: 80px;padding-bottom: 15px;color: blue;">请选择项目
			</view>
			<view @click="projectChoose('牙齿美白')"
				style="text-align: center;font-weight: bold;padding-top: 20px;padding-bottom: 15px;">牙齿美白</view>
			<view @click="projectChoose('儿童齿科')"
				style="text-align: center;font-weight: bold;padding-top: 20px;padding-bottom: 15px;">儿童齿科</view>
			<view @click="projectChoose('烤瓷牙')"
				style="text-align: center;font-weight: bold;padding-top: 20px;padding-bottom: 15px;">烤瓷牙</view>
			<view @click="projectChoose('口腔方案')"
				style="text-align: center;font-weight: bold;padding-top: 20px;padding-bottom: 15px;">口腔方案</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		init
	} from '../../utils/request/upload/qiniuUploader';
	import * as ReservationApi from '@/api/reservation'

	import {
		checkLogin,
		setCartTotalNum,
		setCartTabBadge
	} from '@/core/app'
	import Empty from '@/components/empty'

	export default {
		data() {
			return {
				modelShow: false,
				modalContent: '',
				show: false,
				showPop: false,
				mode: 'date',
				list: [{
						name: '医生介绍'
					},
					{
						name: '立即预约'
					}
				],
				current: 0,
				detail: '',
				mindate: this.getCurrentDate(),
				noInclude: ["2024-1-21", "2024-1-22", "2024-1-23", "2024-1-24", "2024-1-25", "2024-1-26", "2024-1-27"],
				faceurl: '',
				docterName: '',
				docterList: [],
				finalData: {}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 记录商品ID
			this.docter_id = parseInt(options.docid)
			// 加载页面数据
			this.getMyDocterLists();
		},
		methods: {

			projectChoose(project) {
				this.finalData.reservation_project=project;
				console.log(this.finalData);
				ReservationApi.add(this.finalData)
					.then(result => {
						this.$toast(result.message)
						//   uni.navigateBack()
					})
					.finally(() => console.log(1))
			},

			//获取医生列表
			getMyDocterLists() {
				const app = this
				return new Promise((resolve, reject) => {
					// !app.isLogin ? resolve(null) : ReservationApi.docterList({}, {
					ReservationApi.docterList({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.docterList = result.data.list
							app.docterList.forEach(item => {
								if (this.docter_id == item.index) {
									this.detail = item.docterDetail;
									this.faceurl = item.faceurl;
									this.docterName = item.docterName.split(" ")[0];
								}
							})
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},
			change(index) {
				this.current = index;
				if (this.current == 1) {
					this.show = true
					console.log(this.getCurrentDate())
				}
			},
			getCurrentDate() {
				var now = new Date();
				var fullYear = now.getFullYear()
				var fullMonth = now.getMonth() + 1
				var fullDay = now.getDate()
				return fullYear + "-" + fullMonth + "-" + fullDay;
			},
			chooseDate(e) {
				console.log(e.result + "====" + Date.parse(e.result));
				// console.log(e.result);
				var data = [{
						"reservation_time": Date.parse(e.result),
						"reservation_docter": this.docterName,
						"reservation_project": "",
					}
				];
				console.log(data[0])
				this.showPop = true;
				this.finalData = data[0];
			},
			openModal(mesg) {
				this.modelShow = true;
				this.modalContent = mesg;
			},
			// 跳转到登录页
			handleLogin() {
				!this.isLogin && this.$navTo('pages/login/index')
			},

		}
	}
</script>